<template>
    <div id="pushDiscuss" :class="{'opened' : opened}">
<!--      <textarea type="text" class="input-100 textareaStyle" placeholder="说点什么吧！" />-->
      <div id="openDiscussPush"><p><svg :class="{'openClicked' : openClicked}"  @click="openDiscussBox"  id="downOpen" t="1619164033309" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2286" width="20" height="20"><path d="M477.098667 709.717333a46.805333 46.805333 0 0 0 69.802666 0l296.021334-340.736c24.32-28.032 3.328-70.314667-34.944-70.314666H216.021333c-38.272 0-59.306667 42.282667-34.944 70.314666l296.021334 340.736z" p-id="2287"></path></svg></p></div>
      <div id="titleName" class="padding-25">
        <p>标题</p>
        <input type="text" class="input-40">
      </div>
      <div id="discussContent" class="padding-25">
        <p>内容</p>
        <textarea type="text" class="input-100 textareaStyle"/>
      </div>
      <div id="discuss-button" class="padding-25">
        <button class="button widthBtn40">发布</button>
      </div>
    </div>
</template>

<script>
  import $ from 'jquery'

    export default {
        name: "pushDiscuss",
      data(){
          return{
            opened:false,
            openClicked:false,
            loginState: false,
          }
      },
      methods:{
          openDiscussBox(){
           this.opened = !this.opened
            this.openClicked = !this.openClicked
          }
      }

    }
</script>

<style lang="less" scoped>
  .opened{
    height: 306px!important;
  }
  .notLogin{
    width: 100%;
    height: 100%;
    color: black;
    position: absolute;
  }
  #pushDiscuss{
    width: 50rem;
    height: 20px;
    border-radius: 6px;
    margin-bottom: 10px;
    background-color: #d8d8df;
    overflow: hidden;
    transition: all 0.3s ease;
    position: relative;

    #titleName, #discussContent, #discuss-button{
     padding-top: 20px;
    }

    .openClicked{
    transform:rotateX(180deg)
    }
    #discuss-button{
      padding-bottom: 20px;
    }
    p{
      margin-bottom: 6px;
    }
    .textareaStyle{
      border-radius: 6px;
      resize: none;
      padding: 5px 10px;
      height: 100px;
      /*overflow-y: hidden;*/
    }
    #pushDiscussButton{
      width: 100px;
      height: 20px;
    }
    .textareaStyle::-webkit-scrollbar {
      width: 0;
      height: 0;
      /*height: 4px;*/
      /*background-color: #a46eff;*/
      background-color: #f7f7f8;
    }
    .textareaStyle::-webkit-scrollbar-thumb {
      width: 0;
      border-radius: 6px;
      /*-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);*/
      background-color: rgba(1,1,1,0.5);
    }
    #openDiscussPush{
      width: 100%;
      display: flex;
      justify-content: center;
      position: absolute;
    }
    #downOpen{
      z-index: +999;
      transition: all 0.3s ease;
      :hover{
        fill: #ff0000;
      }
    }

  }

</style>
